<template>
  <div class="login" v-wechat-title="this.title">
    <van-tabs v-if="active === 3">
      <van-tab title="模拟账号登录" class="signin_tab" :name="2">

        <van-cell-group>
          <van-field v-model="simPhone" required clearable label="手机号" placeholder="请输入手机号" />
          <van-field required v-model="simSms" center clearable label="验证码" placeholder="请输入验证码">
            <template #button>
              <van-button size="small" type="info" @click="sendsms">{{ smsbtntext }}</van-button>
            </template>
          </van-field>
          <van-field v-model="simUsername" required clearable label="用户名" placeholder="请输入用户名" />

        </van-cell-group>
        <van-row type="flex" justify="space-between">
          <van-col span="9">
          </van-col>
          <van-col span="9">
            <div style="text-align: right; margin-top: 1vh;margin-right: 2vw;">
              <span style="color:grey" @click="active = 1">返回</span>
            </div>
          </van-col>
        </van-row>
        <van-button type="info" size="large" class="signin" @click="login3">登录</van-button>

      </van-tab>
    </van-tabs>
    <van-tabs v-else>
      <van-tab title="账号登录" class="signin_tab" :name="1">

        <van-cell-group>
          <van-field v-model="username" required clearable label="用户名" placeholder="请输入用户名" />
          <van-field v-model="password" type="password" label="密码" placeholder="请输入密码" required />
        </van-cell-group>
        <van-row type="flex" justify="space-between">
          <van-col span="9">
            <van-checkbox v-model="checked" style="margin-top:1vh;margin-left:2vw;" icon-size="16px" shape="square">
              <span style="color:grey">记住密码</span>
            </van-checkbox>
          </van-col>
          <van-col span="13">
            <div style="text-align: right; margin-top: 1vh;margin-right: 2vw;">
              <span style="color:grey; margin-right: 10px;" @click="checkSim">模拟账号登录</span>
              <span style="color:grey" @click="forgetPwd">忘记密码</span>
            </div>
          </van-col>
        </van-row>

        <van-button type="info" size="large" class="signin" @click="login">登录</van-button>
        <!-- <div style="text-align: right; margin-top: 2vh;"><span @click="forgetPwd">忘记密码</span></div> -->

      </van-tab>
      <van-tab v-if="isYzm" title="手机号登录" class="signin_tab" :name="2">

        <van-cell-group>
          <van-field v-model="phone" required clearable label="手机号" placeholder="请输入手机号" />
          <van-field required v-model="sms" center clearable label="验证码" placeholder="请输入验证码">
            <template #button>
              <van-button size="small" type="info" @click="sendsms">{{ smsbtntext }}</van-button>
            </template>
          </van-field>

        </van-cell-group>

        <van-button type="info" size="large" class="signin" @click="login2">登录</van-button>

      </van-tab>

    </van-tabs>


    <van-dialog @confirm="onConfirm" v-model="tipDialog" title="注意" :lazy-render="false">
      <div style="padding: 18px;
    color: #111111;">
        <div>密码<span style="color: red;">过期</span> 或 密码为<span style="color: red;">初始密码</span>请点击确定按钮以修改密码</div>
      </div>
    </van-dialog>
  </div>

</template>

<script>
import Vue from 'vue'
import { Button, Field, Cell, CellGroup, Toast, Checkbox, Tab, Tabs, Col, Row, Dialog } from 'vant'
import qs from 'qs'

Vue.use(Button).use(Field).use(Cell).use(CellGroup).use(Toast).use(Checkbox).use(Tab).use(Tabs).use(Col).use(Row).use(Dialog)
export default {
  name: 'Login',
  data() {
    return {
      active: 1,
      tipDialog: false,
      username: '',
      simUsername: '',
      simSms: '',
      simPhone: '',
      password: '',
      sms: '',
      phone: '',
      title: this.$store.state.crmtitle,
      checked: false,
      // 通过this.$router.push传入,新版钉钉
      dduserid: this.$route.params.dduserid,
      // 通过this.$router.push传入 ,说明未关联
      wxuserid: this.$route.params.wxuserid,
      // 通过this.$router.push传入 ,说明未关联
      wxgzuserid: this.$route.params.wxgzuserid,
      ykjuserid: this.$route.params.ykjuserid,
      smsbtntext: '发送验证码',
      smsnum: 60,
      simSmsnum: 60,
      isYzm: false
    }
  },
  // 传入dduserid即可
  created: function () {
    if (!this.dduserid) {
      this.dduserid = window.localStorage.getItem('dduserid')
    }

    // alert('login: dduserid' + this.dduserid)
    // //console.log('window.localStorage', window.localStorage)
    let jkbcrmstring = window.localStorage.getItem('jkbcrm')
    if (jkbcrmstring) {
      let jkbcrm = JSON.parse(jkbcrmstring)
      this.username = jkbcrm.username
      this.password = jkbcrm.password
      this.checked = true
    }
    this.queryphonelogin()
  },

  methods: {
    goback() {
      console.log(222222222)
      this.active = 1


    },
    checkSim() {
      this.active = 3
    },
    onConfirm() {
      this.$router.push({
        path: '/changpwd',
        query: {
          username: this.username
        }
      })
    },
    login: function () {
      this.reallogin('/api/login.loginbusiness.do')
    },
    login2: function () {
      this.reallogin('/api/login.loginbusinessphone.do')
    },
    login3: function () {
      this.reallogin('/api/login.loginsimulatephone.do')
    },
    sendsms: function () {
      if (this.active === 3 && !this.simPhone) return Toast('请输入手机号')
      if (!this.phone && this.active === 2) {
        Toast('请输入手机号')
      } else {
        if (this.smsnum === 60) {
          this.smstimechange()
          let data = {
            phone: this.phone || this.simPhone,
            smobile: this.phone,
            wxuserid: this.wxuserid,
            dduserid: this.dduserid,
            wxgzuserid: this.wxgzuserid,
            clienttype: 'mobile'
          }
          this.axios({
            method: 'post',
            url: '/api/loginuser.fsyzm.do',
            data: qs.stringify(data)
          }).then(res => {
            // //console.log(res)
            if (!res.data.message) {
              Toast(res.data.des)
              if (res.data.des && res.data.des.indexOf('登录过期') >= 0) {
                this.loginout()
              }
            } else {
              Toast(res.data.message)
            }
          })
        }
      }
    },
    queryphonelogin: function () {
      this.axios({
        method: 'get',
        url: '/api/login.phonelogincfg.do'
      }).then(res => {
        this.isYzm = res.data
      })
    },
    smstimechange: function () {
      if (this.smsnum === 0) {
        this.smsbtntext = '重新发送'
        this.smsnum = 60
        return
      }
      this.smsbtntext = this.smsnum + '秒重发'
      this.smsnum -= 1
      setTimeout(() => {
        this.smstimechange()
      }, 1000)
    },
    reallogin: function (url) {
      if (!this.ykjuserid) {
        this.ykjuserid = window.localStorage.getItem('ykjuserid')
      }

      let that = this
      //console.log(this.checked)
      if (this.checked) {
        if (!this.username) {
          window.localStorage.removeItem('jkbcrm')
        } else {
          window.localStorage.setItem('jkbcrm', JSON.stringify({ 'username': this.username, 'password': this.password }))
        }
      } else {
        window.localStorage.removeItem('jkbcrm')
      }

      if (!this.wxuserid) {
        var r = window.location.search.substr(1).match(new RegExp('(^|&)wxuserid=([^&]*)(&|$)'))
        if (r != null) {
          this.wxuserid = unescape(r[2])
        }
      }

      this.dduserid = window.localStorage.getItem('dduserid')
      if (!this.dduserid) {
        var d = window.location.search.substr(1).match(new RegExp('(^|&)dduserid=([^&]*)(&|$)'))
        if (d != null) {
          this.dduserid = unescape(d[2])
        }
      }
      if (!this.wxgzuserid) {
        var gz = window.location.search.substr(1).match(new RegExp('(^|&)wxgzuserid=([^&]*)(&|$)'))
        if (gz != null) {
          this.wxgzuserid = unescape(gz[2])
        }
      }

      if (!this.ykjuserid) {
        var ykj = window.location.search.substr(1).match(new RegExp('(^|&)ykjuserid=([^&]*)(&|$)'))
        if (ykj != null) {
          this.ykjuserid = unescape(ykj[2])
        }
      }
      let data
      if (this.active === 3) {
        data = {
          dxyzm: this.simSms,
          phone: this.simPhone,
          usernameForPhone: this.simUsername
        }
      } else {
        data = {
          dxyzm: this.sms,
          phone: this.phone,
          smobile: this.phone,
          username: this.username,
          password: this.password,
          wxuserid: this.wxuserid,
          dduserid: this.dduserid,
          wxgzuserid: this.wxgzuserid,
          ykjuserid: this.ykjuserid,
          clienttype: 'mobile'
        }
      }

      this.axios({
        method: 'post',
        url: url,
        data: qs.stringify(data)
      }).then(res => {
        // 移除掉
        window.localStorage.removeItem('dduserid')
        window.localStorage.removeItem('ykjuserid')
        //console.log('loginbusiness:', res)
        if (res.data.flag === '1') {
          if (res.data.des == 'M00003|firstlogin') {
            this.tipDialog = true
          } else {
            Toast(res.data.des)
            if (res.data.des && res.data.des.indexOf('登录过期') >= 0) {
              this.loginout()
            }
          }
        } else {
          const projectData = require('../project.json')
          //console.log(projectData)
          if (projectData.project === 'chenxin/') {
            if (!that.password || that.password === 'cx603367') {
              Toast('登陆密码为空或者为cx603367,请修改密码!')
              this.$router.push('/changpwd').catch(err => {
                //console.log(err)
              })
            } else {
              this.$router.push('/main').catch(err => {
                //console.log(err)
              })
            }
          } else {
            this.$router.push('/main').catch(err => {
              //console.log(err)
            })
          }
        }
      }).catch(res => {
        this.reserror(res)
      })
    },
    forgetPwd: function () {
      //console.log(this.username)
      this.$router.push({
        name: 'forgetpwd',
        params: {
          username: this.username
        }
      }).catch(err => {
        //console.log(err)
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.signin_tab {
  margin-top: 4vh;
}

.signin {
  margin-top: 2vh;
  border-radius: 10vh;
}

:deep(.van-dialog__confirm) {
  color: #111;
}
</style>
